@import '@/lib/reset.scss';
.userAgreement{
  @include rect(390px, 438px);
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  z-index: 11;
  background:#fff;
  // display: none;
  border:1px solid #ccc;
  border-radius: 10px;
  padding:0 15px;
  .Agrtop{
    @include rect(100%, 54px);
    position: relative;
    h4{
      height: 54px;
      line-height: 54px;
      text-align: center;
      font-size: 16px;
    }
    span{
      position: absolute;
      right: 20px;
      top: 20px;
      width: 15px;
      height: 15px;
      color:#888;
    }
  }
  .Agrcon{
    p {
      padding-bottom: 10px;
      color: #95989C;
      line-height:1.5;
      font-size: 14px;
    }
    a {
      color: #e11377;
      display: block;
      float: left;
      width:100%;
    }
    button {
      color: #fff;
      border-radius: 4px;
      width: 150px;
      margin: 0 auto;
      height: 43px;
      background-color: #e11377;
      border: 0;
      margin:25px 0 0 111px;
    }
  }
}
.regirster{
  position: relative;
  @include rect(100%, auto);
  background:#FBFCFE;
  .regHeader{ 
    @include rect(100%, 72px);
    border-bottom:1px solid #ccc;
    background:#fff;
    h1{
      @include rect(960px, 72px);
      margin:0 auto;
      @include flexbox();
      @include align-items();
    }
  }
  .regCon {
    @include rect(960px,560px);
    border:1px solid #ccc;
    border-radius: 10px;
    box-shadow:5px 5px 5px #ddd;
    margin:50px auto;
    .regConTop{
      @include rect(876px, 60px);
      margin:0 auto;
      border-bottom:1px solid #ccc;
      @include flexbox();
      @include align-items();
      @include justify-content(space-between);
    }
    .regMigu{
      width:80%;
      margin:20px auto 0;
      @include flexbox();
      @include justify-content();
      @include flex-direction(column);
      @include align-items();
      h3{
        font-size: 18px;
      font-weight: 400;
      color: #31363E;
      padding-bottom: 18px;
      }
      p{
        padding-bottom: 10px;
        line-height: 1.5;
        font-size: 14px;
        text-align: center;
        color: #95989C;
      }
      form {
        .forms{
          margin:10px 0;
          label{
            @include rect(80px,40px);
            line-height: 40px;
            text-align: right;
            display: inline-block;
            margin-right:10px;
          }
          input{
            @include rect(300px, 40px);
            border:1px solid #ccc;
            border-radius: 5px;
            padding-left:5px;
          }
          p{
            height:20px;
            #prompt{
              display:none;
            }
            #null{
              display:none;
            }
            #error{
              display: none;
            }
          }
        }
        .forms:nth-of-type(2){
          input{
            width:180px;
          }
          p{
            @include rect(100px, 40px);
            border:1px solid #ccc;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
            margin-left:10px;
            float: right;
            background: #ccc;
            color:#fff;
          }
        }
        .forms:last-child input{
          margin-left:80px;
          display: block;
          font-size: 14px;
          color: #fff;
          line-height: 43px;
          border:0;
          background: #e11377;
          &:hover{background: #ac1058;}
        }
      }
    }
  }
  .regFooter{
    // @include rect(960px,100%);
    width:900px;
    height:30px;
    margin:0 auto;
    ul {
      li{
        float: left;
        border-right:1px solid #ccc;
        padding:0 8px;
        height:16px;
        line-height: 16px;
        color:#333;
        font-size: 12px;
      }
      li:last-child{border:0;}
    }
  }
  #fade{ 
    // display:none; 

    position:absolute; 
    top:0%; 
    left:0%; 
    width:100%; 
    height:100%; 
    background-color:black; 
    z-index:1; 
    -moz-opacity:0.5; 
    opacity:.50; 
    filter:alpha(opacity=50); 
    }
}
